<template>
  <el-main>
    <div class="p-big-bg">
      <div class="p-banner">
        <img src="https://aloss.hotforest.cn/web/p-banner.png" alt="">
      </div>

      <div class="p-profile">
        <div class="p-profile-t">
          <span>关于全民体育</span>
        </div>

        <div class="p-profile-mid">
          <ul>
            <li>海量资讯</li>
            <li>权威数据</li>
            <li>精品社区</li>
            <li>大咖汇聚</li>
          </ul>
        </div>
        <div class="p-profile-d">
          <p>
            全民体育,一款为体育粉丝量身定做的APP。这里有最全面最专业的体育资讯,让体育迷们在家的氛围中获得完美的赛事体验
            我们通过分析用户(个人信息、喜好和操作资料),提供全方位、多样化的体育资讯。其中包括客制化深度挖掘赛事数据与球队球员比较
            建立用户个人体育爱好知识库等,让用户能更加方便快捷的在社区中参与赛事互动,井帮助用户获得同阵营球迷的反馈
          </p>
        </div>

        <div class="p-profile-line"></div>
      </div>
      <!--        我们的特色-->
      <div class="p-ts">
        <h3>我们的特色</h3>
        <p>
          每天更新最新最火热的篮球/足球赛事,这里有海量资讯,丰富赛事等,对于自己感兴趣的内容可以一键订阅。
          同时,这款应用还是一个体育社区,随时随地分析最新鲜热门话题
        </p>
      </div>

      <!--        猫店跳转-->
      <div class="p-three">
        <div class="p-three-tab">
          <ul>
            <li><a href="#">体育资讯</a></li>
            <li><a href="#">互动社区</a></li>
            <li><a href="#">直播解说</a></li>
          </ul>
        </div>
        <div class="p-sports-news-bg">
          <div class="p-sports-news">
            <div class="p-sports-news-t">
              <div class="p-sports-news-t-icon"></div>
              <span>体育资讯</span>
            </div>
            <div class="p-sports-news-c">
              <ul>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-n-1.png" alt=""> <span>完整资讯</span></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-n-2.png" alt=""> <span>深度专栏</span></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-n-3.png" alt=""> <span>准确数据</span></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-n-4.png" alt=""> <span>最新赛程</span></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-n-5.png" alt=""> <span>无与伦比</span></a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="p-sports-online">
          <div class="p-sports-online-t">
            <div class="p-sports-online-icon"></div>
            <span>
                    直播解说—大咖嘉宾影爆直播间
                    </span>
          </div>

          <div class="p-sports-online-c">
            <div class="p-sports-online-c-t">
              <div class="p-sports-online-c-t-l">
                <span>篮球大咖</span>
              </div>
              <ul>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-1.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-2.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-3.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-4.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-5.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-6.png" alt=""></a></li>
              </ul>

            </div>
            <div class="p-sports-online-c-t" style="margin-top:20px;">
              <div class="p-sports-online-c-t-l">
                <span>足球大咖</span>
              </div>
              <ul>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/p-1.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/pp-2.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/pp-3.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/pp-4.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/pp-5.png" alt=""></a></li>
                <li><a href="#"><img src="https://aloss.hotforest.cn/web/pp-6.png" alt=""></a></li>
              </ul>

            </div>
          </div>

        </div>

      </div>

      <div class="p-business">
        <h3>媒体合作伙伴</h3>
        <ul>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/1.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/2.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/3.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/4.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/5.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/6.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/7.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/8.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/9.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/10.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/11.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/12.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/13.png" alt=""></a></li>
          <li><a href="#"><img src="https://aloss.hotforest.cn/web/business/14.png" alt=""></a></li>
        </ul>

      </div>
    </div>
  </el-main>
</template>

<script>
  export default {
    name: 'companyProfile',
    layout:'oldDefault',
    head () {
      return {
        title: '公司介绍-全民体育',
        meta: [
          {
            hid: 'keywords',
            name: 'keywords',
            content: '全民体育,全民体育资讯,全民体育新闻,全民体育视频,全民体育篮球,全民体育足球,全民体育赛事,全民体育NationalSports,全民体育直播,全民体育app'
          },
          {
            hid: 'description',
            name: 'description',
            content: '全民体育提供完整的体坛内容，包括即时新闻、最新赛程、深度专栏、准确数据，搭配人性化又时尚的操作接口，让球迷在接收资讯之馀还享有尊绝不凡的使用体验。'
          }
        ]
      }
    },
  }
</script>

<style scoped>
  .el-main {
    padding: 0 !important;
  }

  .el-footer {
    padding: 0;
  }

  .p-banner {
    height: 340px;

  }

  .p-banner img {
    width: 100%;
    height: 100%;
  }

  .p-profile {
    height: 500px;
    background: url("https://aloss.hotforest.cn/web/p-bg-2.png") no-repeat center;
    position: relative;
  }

  .p-profile-t {
    width: 685px;
    height: 126px;
    position: absolute;
    top: -63px;
    left: 370px;
    background: #597DC5;
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.41);

  }

  .p-profile-t span {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    line-height: 126px;
  }

  .p-profile-mid {
    height: 152px;
    /*border: 1px solid red;*/
    position: absolute;
    top: 126px;
    left: 142px;
  }

  .p-profile-mid ul {
    padding: 0;
    margin: 0;
  }

  .p-profile-mid ul li {
    float: left;
    height: 152px;
    width: 152px;
    border-radius: 152px;
    background: #76BCFF;
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    margin-right: 170px;
    line-height: 152px;
  }

  .p-profile-d {
    position: absolute;
    top: 298px;
    left: 192px;
    width: 1043px;
    height: 108px;
  }

  .p-profile-d p {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
    text-align: center;
    line-height: 36px;
    padding: 0;
    margin: 0;
  }

  .p-profile-line {
    border: 1px solid #D2D2D2;
    width: 1438px;
    position: absolute;
    bottom: 40px;
  }

  .p-ts {

  }

  .p-ts h3 {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #333330;
    text-align: center;
  }

  .p-ts p {
    margin: 0 auto;
    width: 834px;
    height: 72px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
    text-align: center;
    line-height: 36px;
  }

  .p-three-tab {
    width: 934px;
    height: 72px;
    margin: 0 auto;
    margin-top: 45px;
    border: 1px solid #D5D5D5;

  }

  .p-three-tab ul {
    padding: 0;
    margin: 0;
    height: 70px;
  }

  .p-three-tab ul li {
    float: left;
    width: 310px;
    height: 70px;
    background: #F7F7F7;
    border-right: 1px solid #D5D5D5;
  }

  .p-three-tab ul li:last-child {
    border-right: 1px solid transparent;
  }

  .p-three-tab ul li a {
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #333333;
    text-align: center;
    line-height: 70px;
  }

  .p-sports-news {

    /*height: 700px;*/

  }

  .p-sports-news-t-icon {
    width: 12px;
    height: 40px;
    background: #76BCFF;
    margin-right: 33px;
  }

  .p-sports-news-t {
    display: flex;
    align-items: center;
    justify-content: left;
    vertical-align: middle;
    padding-bottom: 60px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 77px;
  }

  .p-sports-news-t span {
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #333330;
  }

  .p-sports-news-bg {
    height: 600px;
    background: url("https://aloss.hotforest.cn/web/p-bg-3.png") no-repeat center;
    background-size: 160%;
  }

  .p-sports-news-c {
    /*padding-top: 60px;*/

    padding-left: 100px;
    padding-right: 100px;
    /*padding-top: 77px;*/
  }

  .p-sports-news-c span {
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #333330;
    text-align: center;
  }

  .p-sports-news-c ul {
    margin: 0;
    padding: 0;

  }

  .p-sports-news-c ul li {
    float: left;
    width: 201px;
    height: 420px;
    /*border: 1px solid red;*/
    margin-left: 32px;

  }

  .p-sports-news-c ul li:last-child {
    margin-right: 0;
  }

  .p-sports-online {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 77px;
  }

  .p-sports-online-t {
    display: flex;
    align-items: center;
    justify-content: left;
    vertical-align: middle;
    padding-bottom: 48px;
  }

  .p-sports-online-icon {
    width: 12px;
    height: 40px;
    background: #76BCFF;;
    margin-right: 33px;
  }

  .p-sports-online-t span {
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #333330;
  }

  .p-sports-online-c {
    /*position: relative;*/
    /*width: 900px;*/
    height: 500px;

  }

  .p-sports-online-c-t {
    /*width: 900px;*/
    height: 200px;
    position: relative;

  }

  .p-sports-online-c-t-l {

    width: 47px;
    height: 200px;
    background: #76BCFF;
    position: absolute;
    left: 82px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }

  .p-sports-online-c-t-l span {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #FFFFFF;
    writing-mode: vertical-lr;

  }

  .p-sports-online-c-t ul {
    /*position: absolute;*/
    height: 200px;

    margin: 0;
    padding: 0;
    margin-left: 144px;
  }

  .p-sports-online-c-t ul li {
    /*border: 1px solid red;*/
    float: left;
    width: 129px;
    height: 200px;
    margin-left: 18px;
  }

  .p-three {
    border-bottom: 1px solid #D2D2D2;;
  }

  .p-business {
    width: 1100px;
    height: 250px;
    margin: 0 auto;

  }

  .p-business h3 {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #333330;
    text-align: center;
  }

  .p-business ul {
    margin: 0;
    padding: 0;
  }

  .p-business ul li {
    width: 110px;
    /*height: 30px;*/
    /*border: 1px solid red;*/
    float: left;
    margin-left: 42px;
    margin-top: 44px;
  }

  .p-business ul li a img {
    max-width: 100%;
    max-height: 100%;
  }
</style>
